<template>
	<div class="goodinfo-list">
		<!-- 商品轮播图区域 -->
		<div class="mui-content">
			<div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<!-- 注意：这里绑定的是lunbotuList属性，这是要传递给子组件的 -->
						<!-- isfull="false"是给父组件传递信息：宽度不为100% -->
						<swiper :lunbotuList="imglist" :isfull="false"></swiper>
					</div>
				</div>
			</div>
		</div>
		<!-- 商品购买区域 -->
		<div class="mui-card">
				<div class="mui-card-header">{{good.title}}</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<!-- p 元素（段落）会自动在其前后创建一些空白 
						* 所以p标签会带有自动换行效果-->
						<p class="price">
							市场价: <del>￥{{good.old_price}}</del>&nbsp;&nbsp;
							销售价: <span class="now_price">￥{{good.new_price}}</span>
						</p>
						
						<!-- 购买数量默认为1，但是不能超过某个限度 -->
						<p>购买数量: <numbox @getcount="getSelector"
						:max="good.stock" :shopmax="good.stock"></numbox></p>
						<!-- 这里是传递库存数给子组件 -->
						<p>
							<mt-button type="primary" size="small">立即购买</mt-button>
							<mt-button type="danger" size="small" @click="addCar">加入购物车</mt-button>
						</p>
					</div>
				</div>
				<!-- <div class="mui-card-footer">页脚</div> -->
		</div>
		<!-- 商品参数区域 -->
		<div class="mui-card">
				<div class="mui-card-header">商品参数</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p>商品货号:{{good.id}}</p>
						<p>库存情况:{{good.stock}}</p>
						<p>上架时间:{{good.add_time|dateFormat}}</p>
					</div>
					<br>
					<div class="mui-card-footer">
						<mt-button type="primary" size="large" plain @click="gocontent(good.id)">商品介绍</mt-button>
						<mt-button type="danger" size="large" plain @click="gocomment(good.id)">商品评论</mt-button>
					</div>
				</div>
				</div>
		</div>
    </div>
</template>

<script>
	// 取得轮播图小组件
	import swiper from '../subcomponents/swiper.vue'
	import numbox from '../subcomponents/goodsinfo_numbox.vue'
	import shopcar_numbox from '../subcomponents/shopcar_numbox.vue'
	
	export default{
		data(){
			return{
				id:this.$route.params.id,
				imglist:[],//图片列表
				good:{},//存放商品详情
				num:1,//购买商品数量默认为1
			}
		},
		created(){
			this.getimgs();
			this.getgoods();
		},
		methods:{
			// 获取商品轮播图信息
			getimgs(){
				this.axios.post('http://localhost:3000/api/thumbs',{id:this.id})
				.then(res => {
					if(res.data.status===0){
						res.data.data.forEach( item => {
							this.imglist.push({id:item.id,url:item.url})
						})
						console.log(this.imglist)
					}else{
						console.log('错啦')
					}
				})
			},
			// 获得商品详情
			getgoods(){
				this.axios.get('http://localhost:3000/api/getgood?id='+this.id)
				.then((res) => {
					if(res.data.status===0){
						 var item=res.data.data[0];
							this.good={
								id:item.id,
								title:item.title,
								url:item.url,
								add_time:item.add_time,
								summary:item.summary,
								new_price:item.new_price,
								old_price:item.old_price,
								stock:item.stock,
							};
					}
				})
			},
			// 跳转到商品介绍// 编程式跳转
			gocontent(id){
				this.$router.push({path:'/home/goodcontent/'+id});
			},
			// 编程式跳转到商品评论
			gocomment(id){
				this.$router.push({path:'/home/gocomment/'+id});
			},
			getSelector(count){
				// 当子组件把选中的数量传给父组件，把选中的值保存到data
				this.num=count;
				// console.log(this.num);
			},
			// 加入购物车
			addCar(){
				// 构造一个加入购物车的商品对象,当加入的时候，默认选中商品
				var shop={id:this.good.id,count:this.num,price:this.good.new_price,
				selected:true,title:this.good.title,url:'https://www.z4a.net/images/2019/05/15/0df431adcbef7609a9d7211f2bdda3cc7dd99e56.png'};
				// 调用mutations中的方法修改state中的值
				this.$store.commit("addShopCar",shop)
				// 同时需要在数据库中修改数据，使用update更新相关商品数量
				if(this.$store.state.similary){
					this.axios.post('http://localhost:3000/api/updateshopcarlist',
					{id:this.good.id,count:this.$store.state.new_count})
					.then((res) => {
						if(res.data.status==0){
							console.log('数据修改成功')
						}
					})
					
				}else{
					// 还需要在数据库中增加商品信息
					this.axios.post('http://localhost:3000/api/addshopcargoods',
					{id:this.good.id,url:'https://www.z4a.net/images/2019/05/15/0df431adcbef7609a9d7211f2bdda3cc7dd99e56.png',
					title:this.good.title,sell_price:this.good.new_price,count:this.num,selected:true})
					.then(res => {
						// state.car.push(good);
						if(res.data.status==0){
							console.log('增加成功');
						}
					})
				}
			},
		},
		components:{
			swiper:swiper,
			numbox:numbox,
			shopcar_numbox:shopcar_numbox
		},
		
	}
</script>

<style lang="scss" scoped>
	.goodinfo-list{
		background-color: #eee;
		overflow: hidden;
		.now_price{
			color: red;
			font-size: 16px;
			font-weight: bold;
		}
		.mui-card-footer{
			display: block;
			button{
				margin: 15px 0;
			}
		}

	}
	
</style>
